<template>
  <div class="person-container">
    <span class="title">政策宣传及反馈</span>
    <el-divider></el-divider>
    <div class="form">
      <el-form
        :inline="true"
        label-position="right"
        label-width="120px"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="宣传人姓名">
          <el-input v-model="formInline.name" placeholder="宣传人姓名"></el-input>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="formInline.user" placeholder="项目名称"></el-input>
        </el-form-item>
        <el-form-item label="所在区县">
          <el-select width="185" v-model="formInline.a" placeholder="--请选择--">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在乡镇">
          <el-select v-model="formInline.b" placeholder="--请选择--">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在乡村">
          <el-select v-model="formInline.c" placeholder="--请选择--">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <div class="table-box">
        <xTable
          :loading="loading"
          index
          :head="head"
          :tableData="tableData"
          :search="formInline"
          @on-changePage="(v)=>getData(v)"
          :btn="btn"
          @on-lookClick="lookClick"
        />
      </div>
    </div>
  </div>
</template>

<script>
import xTable from "@/views/xtable.vue";
import { getList } from '@/api/table'
import { setTimeout } from 'timers';
export default {
  components: {
    xTable
  },
  data() {
    return {
      btn:{
        look:{name:"查看",way:"on-lookClick"},
      },
      loading: false,
      head: {
        date: "宣传时间",
        name: "宣传人",
        province: "宣传位置"
      },
      formInline: {
        user: "",
        a: "",
        b: "",
        c: "",
        idCard: "",
        state: "",
        type: ""
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333
        }
      ],
      currentPage: 1
    };
  },
  methods: {
    onSubmit() {
      this.getData(this.formInline);
    },
    lookClick(item){
      console.log(item);
      this.$router.push({name:"政策宣传及反馈详情"})
    },
    getData(data) {
      console.log(data);
      //this.loading = true
      /*getList().then(rs => {
        this.tableData = rs.data;
        this.loading = false;
      })*/
    }
  },
  mounted(){
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
.form /deep/ .el-input__inner {
  width: 200px;
}
</style>

<style lang="scss" scoped>
.person-container {
  padding: 20px;
  .title {
    font-size: 24px;
    font-weight: 500;
    color: rgba(72, 73, 77, 1);
    line-height: 33px;
  }
}
.table,
.table-box {
  margin-top: 20px;
  .block {
    float: right;
    margin: 30px;
  }
}
</style>

